<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>赛事模块</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/bootstrapValidator.css"/>
		<link rel="stylesheet" type="text/css" href="../css/css.css"/>
		<link rel="stylesheet" type="text/css" href="../css/game.css"/>
	</head>
	<body>
		<!--导航条开始-->
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="#"><img src="../img/logo.png" alt="logo"/></a>
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
						<!--<span class="sr-only">切换导航</span>-->
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="navbar-collapse">
					<ul class="nav navbar-nav navbar-left">
						<li><a href="../index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
						<li><a href="equipment.html">器材模块</a></li>
						<li><a href="place.html">场地模块</a></li>
						<li class="active"><a href="game.html">赛事模块</a></li>
						<li><a href="personal.html">个人中心</a></li>						
					</ul>
				</div>
			</div>
		</nav>
		<!--导航条结束-->
		
		<div class="tab1">
			<div class="container">
				<h2 class="tab1-h2">广海体育馆赛事预约</h2>
				<div class="row">
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<img src="../img/tab2.png" class="media-object" alt="tab1第一张图片"/>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><a data-toggle="modal" href="#addGame">篮球赛</a></h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<img src="../img/tab2.png" class="media-object" alt="tab1第一张图片"/>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><a data-toggle="modal" href="#addGame">羽毛球赛</a></h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<img src="../img/tab2.png" class="media-object" alt="tab1第一张图片"/>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><a data-toggle="modal" href="#addGame">网球赛</a></h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<img src="../img/tab2.png" class="media-object" alt="tab1第一张图片"/>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><a data-toggle="modal" href="#addGame">乒乓球赛</a></h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<img src="../img/tab2.png" class="media-object" alt="tab1第一张图片"/>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><a data-toggle="modal" href="#addGame">排球赛</a></h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
					<div class="col-md-6 col">
						<div class="media">
							<div class="media-left">
								<img src="../img/tab2.png" class="media-object" alt="tab1第一张图片"/>
							</div>
							<div class="media-body">
								<h4 class="media-heading"><a data-toggle="modal" href="#addGame">足球赛</a></h4>
								<p class="text-muted">在NBA近来公布的最佳阵容中，沃尔入选最佳阵容三阵，这让他符合了新劳资协议中指定老将特例的条件，可以和奇才提前续约。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--预约赛事模态框开始-->
		<div class="modal" id="addGame" tabindex="-1">
        	<div class="modal-dialog">
        		<div class="modal-content">
        			<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal">
        					<span>&times;</span>
        				</button>
        				<h4 class="modal-title">赛事预约</h4>
        			</div>
        			<div class="modal-body">
        				<form  class="form-group" id="game-form">
        					<div class="form-group">
						<label class="center" for="matchName">赛事名称:</label>
						<input class="form-control center" type="text" name="matchName" id="matchName" placeholder="赛事名称" />
					</div>
					<div class="form-group">
						<label class="center" for="borrowAccount">用户账号:</label>
						<input class="form-control center" type="text" name="borrowAccount" id="borrowAccount" placeholder="用户账号" />
					</div>
					<div class="form-group">
						<label class="center" for="borrowName">用户名称:</label>
						<input class="form-control center" type="text" name="borrowName" id="borrowName" placeholder="用户名称" />
					</div>
					<div class="form-group">
						<label class="center" for="startTime">开始时间:</label>
						<input class="form-control center" type="text" name="startTime" id="startTime" placeholder="开始时间" />
					</div>
					<div class="form-group">
						<label class="center" for="endTime">结束时间:</label>
						<input class="form-control center" type="text" name="endTime" id="endTime" placeholder="结束时间" />
					</div>
					<div class="form-group">
						<label class="center" for="telephone">联系方式:</label>
						<input class="form-control center" type="text" name="telephone" id="telephone" placeholder="联系方式" />
					</div>
					<h5 class="place-h5">预定器材</h5>
					<div class="form-group">
						<label class="center" for="equipmentid">器材名称:</label>
						<select class="form-control" id="eq-select">
							<option value="1">篮球</option>
							<option value="2">羽毛球</option>
							<option value="3">排球</option>
							<option value="4">橄榄球</option>
							<option value="5">乒乓球</option>
						</select>
					</div>
					<div class="form-group">
						<label class="center" for="number">器材数量:</label>
						<input class="form-control center" type="text" name="number" id="number" placeholder="输入器材数量" />
					</div>
					<h5 class="place-h5">预定场地</h5>
					<div class="form-group">
						<label class="center" for="placeId">场地名称:</label>
						<select class="form-control" id="place-select">
							<option value="1">乒乓球</option>
							<option value="2">羽毛球场</option>
							<option value="3">排球场</option>
							<option value="4">游泳馆</option>
							<option value="5">篮球场</option>
						</select>
					</div>
        				</form>
        			</div>
        			<div class="modal-footer">
        				<button type="button" class="btn btn-primary" id="addGame-btn">提交申请</button>
        				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div>
        			</div>
        		</div>
        	</div>
       </div>
		<!--预约赛事模态框结束-->
		
		
		
		<!--底部footer开始-->
		<footer id="footer" class="text-muted bottom">
			<div class="containe">
				<p>管理系统 | 合作联系</p>
				<p>503工作室.体育光管理系统。Powered by Bootstrap</p>
			</div>
		</footer>
		<!--底部footer结束-->
		
		
		<!--场地租借模态框开始-->
		<div class="modal" id="place-rent" tabindex="-1">
        	<div class="modal-dialog">
        		<div class="modal-content">
        			<div class="modal-header">
        				<button type="button" class="close" data-dismiss="modal">
        					<span>&times;</span>
        				</button>
        				<h4 class="modal-title">场地租借</h4>
        			</div>
        			<div class="modal-body">
        				<form class="form-group" id="place-rent-modal">
        					<div class="form-group">
								<label for="placeId">场地编号:</label>
								<input type="text" name="placeId" class="form-control" id="placeId" placeholder="请输入场地编号" />
							</div>
							<div class="form-group">
								<label for="placeName">场地类型:</label>
								<input type="text" name="placeName" class="form-control" id="placeName" placeholder="请输入场地类型" />
							</div>
							<div class="form-group">
								<label for="rentTime">租借时间:</label>
								<input type="text" name="rentTime" class="form-control" id="rentTime" placeholder="请输入租借时间" />
							</div>
							<div class="form-group">
								<label for="rentTime">租借结束时间:</label>
								<input type="text" name="endTime" class="form-control" id="endTime" placeholder="请输入结束时间" />
							</div>
							<div class="form-group">
								<label for="placeUserId">租借人ID:</label>
								<input type="text" name="placeUserId" class="form-control" id="placeUserId" placeholder="请输入账号" />
							</div>
							<div class="form-group">
								<label for="placeUserName">租借人姓名:</label>
								<input type="text" name="placeUserName" class="form-control" id="placeUserName" placeholder="请输入租借人" />
							</div>
							<div class="form-group">
								<label for="contact">联系方式:</label>
								<input type="tel" name="contact" class="form-control" id="contact" placeholder="请输入联系方式" />
							</div>
        				</form>
        			</div>
        			<div class="modal-footer">
        				<button type="button" class="btn btn-primary" id="place-btn" >租借</button>
        				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>	
        			</div>
        		</div>
        	</div>
       </div>
		<!--场地租借模态框结束-->
		
		<script src="../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/game.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
